<template>
  <div class="home">
    <!-- 首页轮播图的结构 -->
    <Carsouel />
    <!-- 首页搜索医院的表单区域 -->
    <Search />
    <!-- 底部展示医院的结构 -->
    <el-row :gutter="20" class="bottom">
      <el-col :span="20">
        <!-- 等级子组件 -->
        <Level @getLevel="getLevel" />
        <!-- 地区 -->
        <Region @getRegion="getRegion" />
        <!-- 展示医院的结构 -->
        <div class="hospital" v-if="hosHospitalArr.length>0">
          <Card
            v-for="(item,index) in hosHospitalArr"
            :key="index"
            class="item"
            :hospitalInfo="item"
          />
        </div>
        <el-empty description="暂无数据" v-else />
        <!-- 分页器 -->
        <div class="page">
          <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="prev, pager, next, jumper, -> ,sizes, total"
            :total="total"
            @current-change="currentChange"
            @size-change="sizeChange"
          />
        </div>
      </el-col>
      <el-col :span="4">
        <Tip />
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
// @ts-ignore
import Carsouel from "@/pages/home/carsouel/index.vue";
// @ts-ignore
import Search from "@/pages/home/search/index.vue";
// @ts-ignore
import Level from "@/pages/home/level/index.vue";
// @ts-ignore
import Region from "@/pages/home/region/index.vue";
// @ts-ignore
import Card from "@/pages/home/card/index.vue";
// @ts-ignore
import Tip from "@/pages/home/tip/index.vue"
// @ts-ignore
import { reqHospital } from "@/api/home";
// @ts-ignore
import type {Content,HospitalResponseData} from "@/api/home/type"
// 分页器页码
let pageNo = ref<number>(1);
// 一页展示几条数据
let pageSize = ref<number>(10);
// 存储已有的医院的数据
let hosHospitalArr = ref<Content>([]);
// 存储医院总个数
let total = ref<number>(0);
// 存储医院的等级
let hostype=ref<string>('')
// 存储地区
let districtCode=ref<string>('')
// 获取已有的医院的数据
const getHospitalInfo = async () => {
  let result:HospitalResponseData = await reqHospital(pageNo.value, pageSize.value,hostype.value,districtCode.value);
  if (result.code === 200) {
    // 存储已有的医院的数据
    hosHospitalArr.value = result.data.content;
    total.value = result.data.totalElements;
  }
};
// 页码改变时触发的事件
const currentChange = () => {
  getHospitalInfo();
};
// 下拉菜单发生变化时触发的事件
const sizeChange = () => {
  getHospitalInfo();
};
// 组件挂载完毕 发一次请求
onMounted(() => {
  getHospitalInfo();
});
// 子组件的自定义事件
const getLevel=(level:string)=>{
  hostype.value=level;
  getHospitalInfo();
}
const getRegion=(region:string)=>{
  districtCode.value=region
  getHospitalInfo();
}
</script>

<style lang="scss" scoped>
.bottom {
  margin-top: 60px;
}
.hospital {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-left: 10px;
  padding-right: 80px;
  .item {
    width: 440px;
    height: 98px;
    margin-top: 30px;
    display: inline-block;
    vertical-align: top;
    border-radius: 4px;
    transition: all 0.3s ease;
  }
}
.page {
  padding-right: 80px;
  margin-top: 20px;
  margin-bottom: 80px;
}
</style>